<template>
    <el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" stripe style="width: 100%">
        <el-table-column prop="id" label="Id" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="gender" label="性别" />
        <el-table-column prop="age" label="年龄" />
        <el-table-column prop="subject" label="所教学科" />
        <el-table-column label="操作" width="250">
            <template #default="{ row }">
                <el-button type="primary" circle @click="edit(row)">
                    <el-icon>
                        <Edit />
                    </el-icon>
                </el-button>
                <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="算了" :icon="InfoFilled"
                    icon-color="#626AEF" title="你确定你要删除这一条教师数据吗" @confirm="deleteRow(row)">
                    <template #reference>
                        <el-button type="danger" :icon="Delete" circle>
                            <el-icon>
                                <Delete />
                            </el-icon>
                        </el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10]" background
            :disabled="disabled" :background="background" layout="jumper, total, sizes, prev, pager, next"
            :total="tableData.length" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>

    <!-- 编辑teacher信息表单弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="Shipping address" customClass="customWidth">
        <el-form :model="form">
            <el-form-item label="姓名" :label-width="formLabelWidth">
                <el-input v-model="form.name" autocomplete="off" />
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="form.age" autocomplete="off" />
            </el-form-item>
            <el-form-item label="所教学科" :label-width="formLabelWidth">
                <el-input v-model="form.subject" autocomplete="off" />
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <el-select v-model="form.gender" placeholder="请选择">
                    <el-option label="男性" value="male" />
                    <el-option label="女性" value="female" />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="dialogFormVisible = false">关闭</el-button>
                <el-button type="primary" @click="submit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script>
import axios from "axios"
// import EditTeacherInfoMessageBox from "./EditTeacherInfoMessageBox.vue"
import { ElMessage } from "element-plus"
import { InfoFilled } from '@element-plus/icons-vue'
export default {
    // components: {
    //     EditTeacherInfoMessageBox
    // },
    data() {
        return {
            tableData: [{
                id: "",
                name: "",
                age: "",
                subject: "",
                gender: ""
            },
            ],
            form: {
                id: "",
                name: "",
                age: "",
                subject: "",
                gender: ""
            },
            currentPage: 1,
            pageSize: 5,
            small: false,
            background: false,
            disabled: false,
            dialogFormVisible: false,
            formLabelWidth: "130px",
        }
    },
    mounted() {
        axios.post("/api/teacher/queryTeachers")
            .then(res => {
                console.log("获取成功", res.data);
                this.tableData = res.data;
            })
            .catch(error => {
                console.error("发送失败", error);
            })
    },
    methods: {
        handleSizeChange(val) {
            console.log(`每页${val}条`);
        },
        handleCurrentChange(val) {
            console.log(`现在的页码是: ${val}`)
        },
        edit(row) {
            this.dialogFormVisible = true;
            this.form.id = row.id;
            this.form.name = row.name;
            this.form.age = row.age;
            this.form.subject = row.subject;
            this.form.gender = row.gender;
        },
        deleteRow(row) {
            axios.get("/api/teacher/delete/" + row.id
            ).then(res => {
                console.log("提交成功", res.data);
            }).catch(error => {
                console.error("发送失败", error);
            });
            axios.post("/api/teacher/queryTeachers")
                .then(res => {
                    console.log("获取成功", res.data);
                    this.tableData = res.data;
                })
                .catch(error => {
                    console.error("发送失败", error);
                })
        },
        submit() {
            const formData = JSON.stringify(this.form)
            axios.post("/api/teacher/updateTeacherById", formData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(res => {
                    console.log("提交成功", res.data);
                    ElMessage({
                        showClose: true,
                        message: '成功修改',
                        type: 'success',
                    });
                    setTimeout(() => {
                        this.dialogFormVisible = false;
                    }, 2000);
                    this.dialogFormVisible = false;
                })
                .catch(error => {
                    console.error("发送失败", error);
                });
            axios.post("/api/teacher/queryTeachers")
                .then(res => {
                    console.log("获取成功", res.data);
                    this.tableData = res.data;
                })
                .catch(error => {
                    console.error("发送失败", error);
                });
        },
    }
}

</script>

<style>
.customWidth {
    width: 35% !important;
}
</style>

<style scoped>
.demo-pagination-block {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}

.el-select {
    width: 300px;
}

.el-input {
    width: 300px;
}

.el-button--text {
    margin-right: 15px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>

